<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微信推送服务管理后台</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .sidebar {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 100;
      padding: 48px 0 0;
      box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
    }
    .main {
      padding: 20px;
      margin-left: 240px;
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-dark bg-dark fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="/admin">微信推送服务管理后台</a>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
        <div class="position-sticky pt-3">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="/admin/users">
                用户管理
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/admin/subscriptions">
                订阅管理
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/admin/push-records">
                推送记录
              </a>
            </li>
          </ul>
        </div>
      </nav>

      <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main">
        <%- body %>
      </main>
    </div>
  </div>

    <!-- 加载动画 -->
    <div id="loadingOverlay" class="position-fixed top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-dark bg-opacity-50" style="display:none; z-index:9999">
      <div class="spinner-border text-light" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>

    <!-- Toast通知 -->
    <div class="position-fixed bottom-0 end-0 p-3" style="z-index:9999">
      <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <strong class="me-auto">系统提示</strong>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body"></div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      // 全局加载状态管理
      document.addEventListener('DOMContentLoaded', () => {
        const loadingOverlay = document.getElementById('loadingOverlay');
        const toastEl = document.getElementById('liveToast');
        const toast = new bootstrap.Toast(toastEl);
        
        // 拦截所有AJAX请求显示加载状态
        const originalFetch = window.fetch;
        window.fetch = async (...args) => {
          loadingOverlay.style.display = 'flex';
          try {
            const response = await originalFetch(...args);
            if(!response.ok) throw new Error('请求失败');
            return response;
          } finally {
            loadingOverlay.style.display = 'none';
          }
        };

        // 显示操作反馈
        window.showToast = (message, isSuccess = true) => {
          const toastBody = toastEl.querySelector('.toast-body');
          toastBody.textContent = message;
          toastEl.classList.remove('bg-success', 'bg-danger');
          toastEl.classList.add(isSuccess ? 'bg-success' : 'bg-danger');
          toast.show();
        };
      });
    </script>
</body>
</html>